<template>
	<view class="nav">
		<!-- 搜索按钮 -->
		<view class="search">
			<image src="../../static/3.png" mode=""></image>
			<text>搜索美食，菜谱</text>
		</view>
		<!-- 导航 -->
		<view class="menu">
			<view class="item" v-for="(val,index) in list" :key="'nav_'+index">
				<navigator :url="val.path">
					<image :src="val.pic"></image>
					<text>{{val.text}}</text>
				</navigator>
			</view>
			
			<!-- <view class="item">
				<navigator  url="#">
					<image src="../../static/5.png" mode=""></image>
					<text>餐宴</text>
				</navigator>
			</view>
			
			<view class="item">
				<navigator  url="#">
					<image src="../../static/6.png" mode=""></image>
					<text>餐宴</text>
				</navigator>
			</view>
			
			<view class="item">
				<navigator  url="#">
					<image src="../../static/7.png" mode=""></image>
					<text>餐宴</text>
				</navigator>
			</view> -->
		</view>
		<!-- ad -->
		<view class="ad">
			<image  src="../../static/8.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				required:true
			}
		},
		data(){
			return{
				//...
			}
		}
	}
</script>

<style lang="less">
	.nav{
		position: relative;//找父元素作为定位的参考点
		// 搜索
		.search{
			width: 690rpx;
			position: absolute;
			left: 0rpx;
			top:-45rpx;
			background-color: #FFFFFF;
			height: 90rpx;
			border-radius: 60rpx;
			// border: 1rpx solid red;
			margin: 0 30rpx;
			box-shadow: 6rpx 6rpx 20rpx #e3e3e3;
			
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			text{
				color:#8d8d8d
			}
			
		}
		// 导航
		.menu{
			display: flex;
			justify-content: space-between;
			// padding-top: 90rpx;
			padding: 90rpx 30rpx 0 30rpx;
			.item {
				image{
					width: 112rpx;
					height: 112rpx;
				}
				navigator{
					display: flex;
					flex-direction: column;
					
					text{
						text-align: center;
						padding-top: 5rpx;
					}
				}
			}
		}
	    
		// ad
		.ad{
			padding: 30rpx;
			
			image{height: 300rpx;
				width: 100%;
			}
		}
	}
</style>
